<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
welcome: <h4 th:text="${user.username}"></h4>
<h1>index</h1>

    <p>【toUserId】：<div><input id="toUserId" name="toUserId" type="text" value="3"></div>
    <p>【text】：<div><input id="contentText" name="contentText" type="text" value="嗷嗷嗷"></div>
    <p>【操作】：<div><a onclick="openSocket()">开启socket</a></div>
    <p>【操作】：<div><a onclick="sendMessage()">发送消息</a></div>

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
 var socket;
 function openSocket() {
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
        	//实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            socket = new WebSocket("ws://localhost:8090/websocket/[[${cid}]]");
            //socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));
            //打开事件
            socket.onopen = function() {
                console.log("Socket 已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                console.log(msg.data);
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket.onclose = function() {
                console.log("Socket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                alert("Socket发生了错误");
                //此时可以尝试刷新页面
            }
            //离开页面时，关闭socket
            //jquery1.8中已经被废弃，3.0中已经移除
            // $(window).unload(function(){
            //     socket.close();
            //});
    }
  }

   function sendMessage() {
      if(typeof(WebSocket) == "undefined") {
          console.log("您的浏览器不支持WebSocket");
      }else {
          console.log("您的浏览器支持WebSocket");
          console.log('[{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}]');
          socket.send('[{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("# ").val()+'"}]');
      }
  }

</script>
</body>
</html>